<div class="content">
    <div id="example_title">
        <h1>Escape/Unescape ID</h1>
        Element ID in DOM cannot have certain characters. If you build ids from a variable name (as it is done in w2ui
        grid/form, etc), you should sanitize it. It is where these two functions come.
    </div>
    <div id="example_view"></div>
    <div id="example_code"></div>
</div>

<!--CODE-->
<input id="encode" class="w2ui-input" value="id-width-hash#space dot.comma,slash\" style="width: 300px">
<br><br>
<button class="w2ui-btn" onclick="escape()">Escape ID</button>
<button class="w2ui-btn" onclick="unescape()">Unescape ID</button>

<!--CODE-->
<script type="module">
import { w2utils, query } from '__W2UI_PATH__'

window.escape = function() {
    let txt = query('#encode')[0].value
    query('#encode').val(w2utils.escapeId(txt))
}

window.unescape = function() {
    let txt = query('#encode')[0].value
    query('#encode').val(w2utils.unescapeId(txt))
}
</script>